<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!DOCTYPE html>
<html>
<!-- 目的：用jquery实现相对功能 -->

<head>
    <meta charset="utf-8" />
    <title>DOM操作-练习</title>
	219970111雷德亮
    <style type="text/css">
        body {
            font-size: 13px;
            line-height: 25px;
        }
        
        table {
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width: 300px;
        }
        
        td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }
        
        .center {
            text-align: center;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        添加新的一行
        function addRow() {
            var fRow = document.getElementById("row3");
            var newRow = document.createElement("tr"); //创建行节点
            var col1 = document.createElement("td"); //创建单元格节点
            col1.innerHTML = "幸福从天而降"; //为单元格添加文本
            var col2 = document.createElement("td");
            col2.innerHTML = "&yen;18.50";
            col2.setAttribute("align", "center");
            newRow.appendChild(col1); //把单元格添加到行节点中
            newRow.appendChild(col2);
            document.getElementById("row1").parentNode.insertBefore(newRow, fRow); //把行节点添加到表格末尾
        }
        function updateRow() {
            var uRow = document.getElementById("row1");
            //标题行设置为字体加粗、文本居中显示，背景颜色为灰色
            uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
        }

        function delRow() {
            var dRow = document.getElementsByTagName("tr"); //访问被删除的行
            if (dRow[2] != null) {
                dRow[2].parentNode.removeChild(dRow[2]); //删除行

            }
        }

        function copyRow() {
            var oldRow = document.getElementById("row3"); //访问复制的行
            var newRow = oldRow.cloneNode(true); //复制指定的行及子节点
            document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
        }


      //添加新的一行
        function addRow1() {
            var fRow = $("#row3");
            var newRow = $("<tr></tr>"); //创建行节点
            var col1 = $("<td>幸福从天而降</td>"); //创建单元格节点并为其添加文本
            var col2 = $("<td>&yen;18.50</td>");
            col2.attr("align", "center"); //为单元格设置属性
            newRow.append(col1); //把单元格添加到行节点中
            newRow.append(col2);
            $("#row3").before(newRow); //把行节点添加到表格中第一个 <tr> 元素之前
        }
        // 修改标题样式
        function updateRow1() {
            var uRow1 = $("#row1");
            uRow1.attr("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
        }

        // 删除第二行
        function delRow1() {
            var dRow = $("tr"); 
            if (dRow[2] != null) {
                $(dRow[2]).remove(); 
            }
        }
        // 复制最后一行
        function copyRow1() {
            var oldRow1 = $("#row3"); 
            var newRow1 = oldRow1.clone(); 
            $("#myTable").append(newRow1); 
        }
    </script>
</head>

<body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
        <tr id="row1">
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr id="row2">
            <td>看得见风景的房间</td>
            <td class="center">&yen;30.00</td>
        </tr>
        <tr id="row3">
            <td>60个瞬间</td>
            <td class="center">&yen;32. 00</td>
        </tr>
    </table>
    <input name="b1" type="button" value="增加一行" onclick="addRow()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
    <input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
    <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
    <br>

</body>
</html>

    </body>

</html>